<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vuejs练习</title>
</head>
<body>
    <div id="example">
        <span>Message is: {{ message }}</span>
        </br>
        <input type="text" v-model="message" placeholder="edit me" >
        </br>

        <input type="checkbox" id="checkbox1" v-model="checked">
        <label for="checkbox1">{{ checked }}</label>
        </br>

        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        </br>
        <span>Checked names:{{checkedNames | json}}</span>
        </br>

        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        </br>
        <span>Picked:{{picked}}</span>
        </br>

        <select v-model="selected">
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        </br>
        <span>Selected:{{selected}}</span>
        </br>

        <select v-model="selectedmultiple" multiple>
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ selectedmultiple | json }}</span>
        </br>

        <select v-model="selectedoptions">
            <option v-for="option in options" v-bind:value="option.value">
                {{option.text}}
            </option>
        </select>
        <br>
        <span>Selected:{{selectedoptions}}</span>
        <br>
    </div>
    <script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
    <script src="index.js"></script>
</body>
</html>